﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>控制台</title>
    <style type="text/css">

    </style>
    <script src="http://hsjdtech.com/inter/scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pxnow = 0;
        $(document).ready(function () {
            getGriddata();
        });
        function getGriddata() {
            $("#arrowImg").css("margin-left", "0px");
            WarningvalueQuery();
        }
        function WarningvalueQuery() {
            var json = [{
                "px1": "80",
                "px2": "100",
                "px3": "100",
                "px4": "92",
                "px5": "200",
                "dtstr1": "2019-01-01",
                "dtstr2": "2019-01-15",
                "dtstr3": "2019-01-25",
                "dtstr4": "2019-02-05",
                "dtstr5": "2019-02-22",
                "dtstr6": "2019-03-08",
                "pxnow": "50"
            }];
                if (json.length > 0) {
                    $("#px1").width(json[0]["px1"]);
                    $("#px2").width(json[0]["px2"]);
                    $("#px3").width(json[0]["px3"]);
                    $("#px4").width(json[0]["px4"]);
                    $("#px5").width(json[0]["px5"]);
                    $("#dtstr1").width(json[0]["px1"] - 2);
                    $("#dtstr2").width(json[0]["px2"] - 2);
                    $("#dtstr3").width(json[0]["px3"] - 2);
                    $("#dtstr4").width(json[0]["px4"] - 2);
                    $("#dtstr5div").width(json[0]["px5"] - 4);
                    $("#dtstr1").html(json[0]["dtstr1"]);
                    $("#dtstr2").html(json[0]["dtstr2"]);
                    $("#dtstr3").html(json[0]["dtstr3"]);
                    $("#dtstr4").html(json[0]["dtstr4"]);
                    $("#dtstr5").html(json[0]["dtstr5"]);
                    $("#dtstr6").html(json[0]["dtstr6"]);
                    pxnow = json[0]["pxnow"];
                }
                $("#jdcontentDiv").width(0);
                $("#jdcontentDiv").height(20);
                $("#jdcontentDiv").animate({ width: "572px" }, "1000", "swing", function () {
                    $("#jdcontentDiv").animate({ height: "40px" }, "500", "swing", function () {
                        $("#arrowImg").animate({ marginLeft: pxnow + "px" }, "800", "swing", function () { });
                    });
                });
        }
    </script>
</head>
<body style="margin: 0px; padding: 0px;">

<div style="height: 204px; width: 586px; float: left; border: 2px solid #2B8ECA;margin-left: 10px;">
    <div style="height: 30px; line-height: 30px; margin-top: 5px; width: 100px; float: left;margin-left: 6px; font-size: 15px; font-family: 宋体; color: #00A2E8; font-weight: bold;">
        马铃薯生长期
    </div>
    <div style="height: 90px; width: 572px; margin-left: 6px; float: left;">
        <div style="height: 20px; width: 100%; float: left;">
            <img id="arrowImg" alt="进度" src="" style="height: 20px;width: 20px; float: left;" />
        </div>
        <div id="jdcontentDiv" style="height: 20px; width: 0px; float: left; overflow: hidden;border-radius: 5px;">
            <div style="height: 100%; width: 100%; float: left;">
                <div id="px1" style="height: 40px; width: 80px; line-height: 40px; color: White; font-size: 14px;
                    text-align: center; font-family: 宋体; float: left; background-color: #555;">
                    播种期</div>
                <div id="px2" style="height: 40px; width: 100px; line-height: 40px; color: White; font-size: 14px;
                    text-align: center; font-family: 宋体; float: left; background-color: #1F9E45;">
                    出苗期</div>
                <div id="px3" style="height: 40px; width: 100px; line-height: 40px; color: White; font-size: 14px;
                    text-align: center; font-family: 宋体; float: left; background-color: #1779A8;">
                    封垄期</div>
                <div id="px4" style="height: 40px; width: 92px; line-height: 40px; color: White; font-size: 14px;
                    text-align: center; font-family: 宋体; float: left; background-color: #ff0000;">
                    开花期</div>
                <div id="px5" style="height: 40px; width: 200px; line-height: 40px; color: White; font-size: 14px;
                    text-align: center; font-family: 宋体; float: left; background-color: #FF5500;">
                    收获期</div>
            </div>
        </div>
        <div style="height: 20px; width: 100%; float: left;">
            <div id="dtstr1" style="height: 20px; line-height: 24px; width: 78px;  font-size: 12px;color: #555; float: left; border-left: 2px solid #ccc;">9月20日</div>
            <div id="dtstr2" style="height: 20px; line-height: 24px; width: 198px;  font-size: 12px;color: #555; float: left; border-left: 2px solid #ccc;">10月10日</div>
            <div id="dtstr3" style="height: 20px; line-height: 24px; width: 198px;  font-size: 12px;color: #555; float: left; border-left: 2px solid #ccc;">10月10日</div>
            <div id="dtstr4" style="height: 20px; line-height: 24px; width: 198px;  font-size: 12px;color: #555; float: left; border-left: 2px solid #ccc;">10月10日</div>
            <div id="dtstr5div" style="height: 20px; line-height: 24px; width: 288px;  font-size: 12px;
                color: #555; float: left; border-left: 2px solid #ccc; border-right: 2px solid #ccc;">
                <span id="dtstr5" style="height: 20px; width: 100px; text-align: left; float: left;">1月10日</span>
                <span id="dtstr6" style="height: 20px; width: 80px; text-align: right; float: right;">4月30日</span>
            </div>
        </div>
    </div>
    
</div>
                   
</body>
</html>
